<template>
  <div class="category" @click="hidepop()">
    <mt-header title="商品分类管理">
      <router-link to="/shop" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    
    <div class="wrapper" ref="askWrapper">
      <ul>
        <li v-for="item in itemarr">
          <div class="author-ask">
            <div class="author">
              <div class="info">
                <p>{{item.cnname}}</p>
              </div>
              
            </div>
            <span class="more" @click="clickItemMore($event,item.id)">...</span>
          </div>
          
        </li>
      </ul>
      <div class="loading-wrapper" >
          <mt-spinner v-show="loadmore" color="#26a2ff" type="triple-bounce"></mt-spinner>
          <p v-show="nomore">没有更多啦</p>
      </div>
    </div>
    <popover-comp ref="popover" :popoverVisible="popoverVisible">
      <ul slot="popul">
        <li @click="xiuGoods">修改</li>
        <li @click="delGoods">删除</li>
      </ul>
    </popover-comp>
    <popDialog :popupVisible="popupVisible" @comit="comit" @cannal="cannal"></popDialog>
    <goods-cat-pop ref="catpop" :title="xiugaistr" :popupVisible="popbjcatVisible" :catid="couponid" @comit="xiugai" @cannal="bjcancel"></goods-cat-pop>
    <goods-cat-pop :title="addstr" :popupVisible="popaddcatVisible" @comit="add" @cannal="addcancel"></goods-cat-pop>
    <h1 class="no-data" v-if="nodata">没有数据</h1>   
    <span class="bo-cri" @click="addGoods">增加</span>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import axios from 'axios'
import BScroll from 'better-scroll'
import popoverComp from 'components/common/popoverComp2.vue'
import popDialog from 'components/common/popDialog.vue'
import goodsCatPop from 'components/common/goodsCatPop.vue'
export default {
  
  data() {
    return {
      errorImg01: 'this.src="' + require('../.././assets/img_tx.jpg') + '"',
      itemarr:[],
      loadmore : false,
      nomore : false,
      currentPage : 1,
      pagesize : 5,
      zpage:0,
      pullup: true,
      urls : '',
      popoverVisible : false,
      popbjcatVisible:false,
      popaddcatVisible:false,
      addstr:'添加分类',
      xiugaistr:'修改分类',
      scrollY : 0,
      refreshDelay: 20,
      couponid:'',
      popupVisible:false,
      catid : '',
      nodata : false
    }
  },
  mounted() {
      this.initData();
      this.urls = HOST;
  },
  watch : {
    '$route.path'(){
      console.log(this.$route.path)
    }
  },
  methods:{
    
    //删除 pop
    cannal(){
      this.popupVisible = false
    },
    comit(){
      this.popupVisible = false
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"catid" : this.couponid}
      axios.post(HOST + "/Shop/delete_category",params).then((res) => {
        res = res.data
        let result = res.result
        if(result == 'success'){
          
          Toast({
            message: res.message,
            iconClass: 'icon icon-success'
          });
          //this.$router.go(0)
          this.$router.go('/category/')
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    },

    //修改pop
    bjcancel(){
      this.popbjcatVisible = false
    },
    xiugai(msg){
      this.popbjcatVisible = false
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"catid" : this.couponid,"name":msg}
      axios.post(HOST + "/Shop/init_category",params).then((res) => {
        res = res.data
        let result = res.result
        if(result == 'success'){
          
          Toast({
            message: res.message,
            iconClass: 'icon icon-success'
          });
          //this.$router.go(0)
          this.$router.go('/category/')
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    },
    //增加pop
    addcancel(){
      this.popaddcatVisible = false
    },
    add(msg){
      this.popaddcatVisible = false
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"name":msg}
      axios.post(HOST + "/Shop/add_category",params).then((res) => {
        res = res.data
        let result = res.result
        if(result == 'success'){
          
          Toast({
            message: res.message,
            iconClass: 'icon icon-success'
          });
          //this.$router.go(0)
          this.$router.go('/category/')
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    },
    delGoods(){
      this.popupVisible = true
    },
    xiuGoods(){
      this.popbjcatVisible = true
      this.$refs.catpop.getcatinfo(this.couponid)
    },
    addGoods(){
      this.popaddcatVisible = true
    },
    initData(){
      this.currentPage = 1
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize}
      axios.post(HOST + "/Shop/category_list",params).then((res) => {
        res = res.data;
        let result = res.result
        if(result == 'success'){
            this.zpage = res.data.total_page
            let arr = res.data.lists
            this.loadmore = false;
            if(arr != ''){
              this.nodata = false
              this.itemarr = arr
              console.log(this.itemarr)
              this.$nextTick(() => {
                //dom更新了 可以调用better-scroll了
                this.initScroll();
              })
              this.currentPage = this.currentPage+1;
            }else{
              this.itemarr = ''
              this.nodata = true
            }
            
          }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
        
      })
    },
    initScroll(){
      if(this.contentScroll){
        this.contentScroll.refresh();
      }else{
        this.contentScroll = new BScroll(this.$refs.askWrapper,{
          probeType:3,
          click:true
        });
      }
      this.contentScroll.on('scroll',(pos)=>{
        this.scrollY = Math.abs(Math.round(pos.y));
        this.cannal()
        //console.log("====scrollY" + this.scrollY)
      });
      this.contentScroll.on('touchend', (pos) => {
        // 下拉动作
        if (pos.y > 50) {
          //console.log('xiala')
        }
      });
      this.contentScroll.on('scrollEnd', () => {
        // 滚动到底部
        if (this.contentScroll.y <= (this.contentScroll.maxScrollY + 50)) {
          //console.log('shang')
          this.loadData();
        }
      })
    },
    loadData(){
      if(this.currentPage<=this.zpage){
        this.loadmore = true;
        this.nomore = false;
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize}
        axios.post(HOST + "/Shop/category_list",params).then((res) => {
          res = res.data
          if(res.result == "success"){
            let arr = res.data.lists
            this.loadmore = false;
            if(this.itemarr == ''){
            this.itemarr = arr ; 
            }else{
              for(let item of arr){
                this.itemarr.push(item)
              }
            }
              
            // this.$nextTick(() => {
            //   //dom更新了 可以调用better-scroll了
            //   this.initScroll();
            // })
            this.currentPage = this.currentPage+1;
          }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
        })
      }else{
        setTimeout(() => {
          this.loadmore = false;
          this.nomore = true;
          setTimeout(() => {
            this.nomore = false;
          }, 1000)
        }, 1500)
      }
      
    },
    clickItemMore(event,id){
      this.couponid = id;
      event.stopPropagation();//取消事件冒泡
      //网页  点击事件只执行一次
      if(!event._constructed){
        return;
      }
      let obj = event.target;
      let top = obj.offsetTop;
      let left = obj.offsetLeft;
      let scrollY = this.scrollY
      
      //调用子组件的方法
      if(!this.popoverVisible){
        this.$refs.popover.show(left,top,scrollY)
      }
      this.popoverVisible = !this.popoverVisible;
    },
    hidepop(){
      if(this.popoverVisible){
        this.popoverVisible = false;
      }
    },
    refresh() {
      // 代理better-scroll的refresh方法
      this.contentScroll && this.contentScroll.refresh();
      
    }
  },
  components:{
    popoverComp,
    popDialog,
    goodsCatPop
  },
  watch: {
    // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
    itemarr() {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  }
}
</script>

<style lang="stylus">
.category
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .bo-cri
    position:fixed
    bottom:15px
    right:5px
    background:#108ee9
    color:#fff
    padding:15px 10px
    border-radius:50%
    box-shadow: 1px 2px 5px #999
  .mint-header
    color:rgb(104, 104, 104)
    background:#26a2ff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee
    position: fixed
    top: 0
    left: 0
    width: 100%
    z-index: 10
    color:#fff
    height 44px
    label,span
      color:#fff
  .no-data
    position: absolute
    top: 100px
    left: 40%
  .pop-dialog
    width:200px
    height:180px
    h1
      line-height:38px
      font-size:18px
      text-align:center
      border-bottom:1px solid #ccc
      color:#108ee9
      font-weight:700
    p
      line-height:30px
      font-size:16px
      margin:20px
      color:#108ee9
    .g-btn
      clear:both
      margin:10px 20px
      display:flex
      .btn-canal,.btn-ok
        height:35px
      .btn-canal
        flex:0 0 40%
      .btn-ok
        margin-left:10px
        flex:1
  .wrapper
    height:90%
    width:100%
    position:fixed
    top:40px
    left:0
    .loading-wrapper
      text-align:center
      height:24px
      width:100%
      position:absolute
      left:0
      bottom:-24px
      p
        width:100%
        line-height:24px
        font-size:14px
        color:#686868
    ul
      position:absolute
      top:0
      left:0
      width:100%
      li
        background:white
        .author-ask
          display:flex
          border-bottom:1px solid #d9d9d9
          padding:10px 20px
          .author
            flex:1
            img
              width:70px
              height:70px
              border-radius:50%
              float:left
            .info
              float:left
              margin-left:10px
              h1
                font-size:16px
                color:#f00
                margin-top: 10px
              p
                font-size:14px
                margin-top: 5px
                color:#333
              .time
                margin-top:0px
              span
                font-size:14px
                color:#686868
          .more
            flex:0 0 30px
            text-align:center
            font-size:20px
            font-weight:700

</style>